<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        margin: 10px;
        padding: 5px;
        font-size: 12px;
      }
      #father {
        width: 500px;
        margin: 50px auto;
        border: 1px #666 solid;
        padding: 10px;
      }
      #first {
        background-color: #fc9;
        border: 1px #b55a00 dashed;
        height: 25px;
        float: left;
      }
      #second {
        background-color: #ccf;
        border: 1px #0000a8 dashed;
        height: 60px;
      }
      #third {
        background-color: #c5decc;
        border: 1px #395e4f dashed;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <!-- float属性
      left
      元素向左浮动
      right
      元素向右浮动
      none
      默认值。元素不浮动，并会显示在其文本中出现的位置
     浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
   -->

    <!-- 1.浮动元素支持所有的css样式
          2.内容撑开宽高
          3.多个元素设置浮动，宽度足够的话，会排在一行
          4.脱离文档流
          5.提升层级半级
          也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

          注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素
    -->

    <!-- 1）没有设置浮动的元素会填充浮动元素留下来的空间

        2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

        3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围 -->

    <div id="father">
      <div id="first">第一个盒子</div>
      <div id="second">第二个盒子</div>
      <div id="third">第三个盒子</div>
    </div>
  </body>
</html>
